<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件上传</title>

</head>

<body>
  <input type="file" id="btnfile">
  <input type="button" value="上传" onclick="upload(0)">
  <button id="btn">0%</button>
  <script src="./axios.js"></script>
  <script>
    let chunkSize = 1024 * 1024
    let index=0
    let size=0
    let radio=0
    function upload(index) {
      let file = btnfile.files[0]
      console.log("file",file)
      size=file.size
      let [fname, fext] = file.name.split(".")
      
      let start = index * chunkSize
      radio=(index/(size/chunkSize))*100
      radio=Math.floor(radio)
      console.log("size/chunkSize",index/(size/chunkSize))
      btn.innerText=`${radio>100?100:radio}%`
      if (start > file.size) {
        merge(file.name)
        return
      }
      let blob = file.slice(start, start + chunkSize)
      let blobName = `${fname}.${index}.${fext}`
      let blobFile = new File([blob], blobName)
      let formData = new FormData()
      formData.append("file", blobFile)
      index++
      axios.post("/upload", formData).then(res => {
        console.log("rea", res)

        upload(index)
      })
    }
    function merge(name){
      axios.get("/merge?name="+name).then(res=>{
        console.log("merge",res)
      })
    }
    window.onload = () => {
      let btnfile = document.getElementById("btnfile")

    }
  </script>
</body>

</html>